<template>
    <div class="order_box">
        <nav-com title="确认下单" :showView='showView' @back="backHandler()"></nav-com>
        <van-pull-refresh v-model = 'isLoading' @refresh='onRefresh'>
        <!-- 地址 -->
        <div class="group_add" style="min-height:22.66vw; hieght:auto;">
            <div v-if='addressDetail==null' @click='add' class="pay_add">
                <img src='../../assets/add.png' />
                <p>添加收货地址</p>
            </div>
            <div v-else @click='edit' class="pay_add_success">
                <img src='../../assets/add.png' />
                <div class="pay_add_right">
                    <div style="display:flex;"><p>{{addressDetail.name}}</p><span style="color:#999; margin-left:2.6vw;padding-top:0.5vw;">{{addressDetail.cellphone}}</span></div>
                    <div style="color:#999">{{addressDetail.province}},{{addressDetail.city}},{{addressDetail.district}}{{addressDetail.adressDetail}}</div>
                </div>
            </div>
        </div>
        
        <div class="group_add" style="height:auto;">
            <div class='pay_title'>订单详情</div>
            <div class="pay_product">
                <img :src='details.picUrl' />
                <div class="pay_pr_title">
                    <div>{{details.name}}</div>
                </div>
            </div>
            <div class='pay_content'>
                <div class="content_border"></div>
                <div>
                    <ul class="content_text">
                        <li style="margin-top:6vw; padding-bottom:3vw;">
                            <p>惊爆零售价</p>
                            <span>¥ {{details.unitPrice}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="group_add" style="hieght:auto;">
            <div class='pay_title'>支付方式</div>
            <ul class="pay_list">
                <li @click="paySel(1)">
                    <div class="pay_icon">
                        <img src='../../assets/weixinicon.png' />
                        <p>微信支付</p>
                    </div>
                    <div class="pay_sel">
                        <img v-if="selFlag == 1 " :src="seled" />
                        <img v-else :src="sel" />
                    </div>
                </li>
                <li @click="paySel(2)">
                    <div class="pay_icon">
                        <img src='../../assets/payicon.png' />
                        <p>支付宝支付</p>
                    </div>
                    <div class="pay_sel">
                        <img v-if="selFlag == 2 " :src="seled" />
                        <img v-else :src="sel" />
                    </div>
                </li>
              <li @click="paySel(3)">
                <div class="pay_icon">
                  <img src='@/assets/pay_juan.png' />
                  <p>提货券兑换</p>
                </div>
                <div class="pay_sel">
                  <img v-if="selFlag == 3 " :src="seled" />
                  <img v-else :src="sel" />
                </div>
              </li>
				<li @click="paySel(4)">
					<div class="pay_icon">
					  <img src='@/assets/pay_juan.png' />
					  <p>第三方商城核销</p>
					</div>
					<div class="pay_sel">
					  <img v-if="selFlag == 4 " :src="seled" />
					  <img v-else :src="sel" />
					</div>
				  </li>
            </ul>
        </div>
        
        <div style="height:40vw;">&nbsp;</div>
        </van-pull-refresh>
        <div class="card3_bottom">
            <div  class="card3_display">
                <van-button :loading='loadingFlag'  @click='pay()' loading-text='购买中...'  class="card3_btn">立即购买</van-button>
            </div>
        </div>
      <van-popup style="background: #F5F5F5;border-radius: 3.2vw 3.2vw 0px 0px;" v-model="show" position="bottom">
        <div class="scroll">
          <div class="list" >
            <div class="list_item" @click="choose(item)" v-for="(item) in arr" :key="item.id">
              <div class="list_item_left">
                <span class="left_unit">¥</span>
                <span class="left_price">{{parseInt(item.library.money)}}</span>
              </div>
              <div class="list_item_right">
                <div class="right_left">
                  <div class="right_left_title">{{item.library.name}}</div>
                  <div class="right_left_time">有效期{{item.end_time}}</div>
                </div>
                <div class="right_right">
                  <img style="width: 5.3vw" :src="item.check?check:sel"/>
                </div>
              </div>

            </div>
          </div>

        </div>
        <div class="bottom_btn">
          <div class="bottom_btn_left" @click="closed">不使用核销提货券</div>
          <div class="bottom_btn_right" @click="use">确定使用</div>
        </div>
      </van-popup>
    </div>
</template>
<script>
import sel from '../../assets/sel.png'
import seled from '../../assets/seled.png'
import  check from "@/assets/check-circle@2x.png"
import {getItems,getAdressManagesAPI,postWxAppPay,postAlipay }  from '@/api/api'
import navCom from '@/component/nav'
import {codeLists, writeoff} from "../../api/myExaminatonGaper";
import {Toast} from "vant";
import moment from "moment";
export default {
    name:'pay',
    components:{
        navCom
    },
    data() {
        return {
            id:'',
          check,
            show:false,
            showView:true,
            details:{},
            selFlag:1,
            sel:sel,
            seled:seled,
            checked:false,
            loadingFlag:false,
            addressDetail:null,
            uid: weixin.getUserId(),
            addressId:null,
            itemid:null,
            borderColor:'1px solid #F7541C',
            backgroundColor:'#FFF7F0',
            tab:1,
            isLoading:false,
            arr:[]
        }
    },
   mounted(){
        this.orderInit()

    },
    methods:{
      closed(){
        this.show=false;
        this.arr=this.arr.map(ele=>({...ele,check:false}));
        this.selFlag=1
      },
      use(){
          if(this.arr.some(ele=>ele.check)){
            this.show=false;
            this.selFlag=3
          }else {
            Toast("请选择")
          }
      },
       async getList(){
         const res= await codeLists({
           status: 1,
           offset: 1,
           limit: 1000,
           user_id: weixin.getUserId(),
         })
         const arr=res.data.data.filter(ele=>+ele.library.money>=+this.details.unitPrice)
          this.arr=arr.map(ele=>({
            ...ele,
            check:false,
            end_time:moment(ele.end_time).format("YYYY-MM-DD")
          }))
         // console.log(res,this.details,"res")
        },
        //返回
        backHandler(){
            this.$router.go(-1)
        },
        onRefresh(){
            this.orderInit()
            this.isLoading = false
        },
        //微信初始化
        orderInit(){
            this.id = location.href.substring(location.href.indexOf('pay/') + 4);
            getItems({id:this.id}).then(res=>{
                this.details = res.data.data
               this.getList();
            });
            this.init()
        },
        choose(val){
          this.arr.map(ele=>ele.check=false);
          val.check=true;
          this.arr=this.arr;
          // console.log(val,"val")
        },
        //获取数据地址
        init(){
            if(this.uid == null){
                return false
            }
            getAdressManagesAPI({uid:this.uid}).then(res=>{
                let data = res.data.data.rows[0]
                if(data){
                    localStorage.setItem('addressedId',data.id)
                    this.addressDetail = data
                }

            })
        },
        //添加收货地址
        add(){
            this.$router.push('/add')
        },
        //修改收货地址
        edit(){
            this.$router.push('/add')
        },
        //支付
        pay(){
            if(this.addressDetail == null){
                this.$dialog.alert({
                    message:'您还没有收货地址噢，请填写'
                }).then(()=>{
                    this.$router.push('/add')
                })
            }
            let data = {
                
                uid:this.uid,
                itemId:this.details.id,
                realName:this.addressDetail.name,//收货人姓名
                userPhone:this.addressDetail.cellphone, //收货人电话
                province:this.addressDetail.province,
                city:this.addressDetail.city,
                district:this.addressDetail.district,
                addressDetail:this.addressDetail.adressDetail,
                goodsDetail:this.details.name,
                handlingMethod:1,//0 分期， 1 不分期

                cardSn:'-'
            }
            if(this.id == 100033){
                data.goodsType = 'zj4399'
            }else if(this.id == 100034){
                data.goodsType = 'zj4999'
            }else if(this.id == 100035){
                data.goodsType = 'zj2w'
            }else if(this.id == 100036){
                data.goodsType = 'zj3w'
            }else if(this.id == 100037){
                data.goodsType = 'zj4799'
            }else if(this.id == 100038){
                data.goodsType = 'v15p4199'
            }else if(this.id == 100039){
                data.goodsType = 'i18p4899'
            }else if(this.id == 100040){
                data.goodsType = 'v16p4399'
            }else if(this.id == 100041){
                data.goodsType = 'k9p6499'
            }else if(this.id == 100042){
                data.goodsType = 'vk19p5999'
            }

            let strData = '';
            if(this.selFlag == 1){
                //微信
                data.appId = weixin.appId
                postWxAppPay(data).then(res=>{
                    if(res.data.code == 200){
                        strData = JSON.stringify(res.data.data)
                        window.JS_TROOPS.payByWeChat(strData)
                    }
                })
            }else if(this.selFlag == 2){
                //支付宝
                data.appId = weixin.alipayApp
                postAlipay(data).then(res=>{
                    if(res.data.code == 200){
                        strData = JSON.stringify(res.data.data)
                        window.JS_TROOPS.payByAlipay(strData)
                    }
                })
            }else if(this.selFlag == 3){
              writeoff({
                code_id:this.arr.find(ele=>ele.check).id,
                item_id:this.details.id,
                real_name:this.addressDetail.name,
                user_phone:this.addressDetail.cellphone,
                province:this.addressDetail.province,
                city:this.addressDetail.city,
                district:this.addressDetail.district,
                address_detail:this.addressDetail.adressDetail,
                goods_detail:this.details.name,
                handlingMethod:1,//0 分期， 1 不分期
                pic_url:this.details.picUrl,
                pic_url_json:this.details.picUrlJson,
                body:this.details.body,
                goods_type:data.goodsType,
                total_price:this.details.unitPrice,
                app_id:"12312123",
                user_id:data.uid,
                cardSn:'-'
              }).then(res=>{
                Toast(res.data.msg)
                if(res.data.code==1){
                  this.$router.replace("/my")
                }
              })
            }
            
            
        },
        //选择
        paySel(val){
          // this.selFlag=val
          if(val == 1){
                this.selFlag = 1
            }else if(val == 2){
                this.selFlag = 2
            }else if(val===3){
				if(this.arr.length){
				  // this.selFlag = 3
				  this.show=true;
				}else{
				  Toast("未能找到可以使用的提货券")
				}
            }else if(val===4){
				this.selFlag = 4
			}
            
        },
    }

}
</script>
<style scoped>
/* 共用 */
p {margin:0; padding:0;}
html,body,#app,.order_box {height:100%; overflow: hidden;}
.order_box {background:#f2f2f2; height:auto; min-height:100vh;}
.group_add{width:94.66vw; margin-top:2.6vw; margin-left:2.6vw; border-radius: 2.6vw; background:#fff;}
.card3_bottom { position:fixed; bottom:0; left:0; right:0; height:18.66vw; background: #fff;; height:18.66vw;}
.card3_display {margin:3.3vw; width:auto;}
.card3_bottom .card3_btn {width:94.66vw;;  height:12vw; line-height:12vw; font-size:4vw; background:#D62F34; border-radius: 6vw; text-align:center; color:#fff; }

.pay_add {padding-top:8.4vw; display:flex;}
.pay_add img {width:4.53vw; height:5.86vw;padding-left:34vw;}
.pay_add p {padding-left:2.6vw; font-size:3.4vw; color:#333;}
.pay_add_success {display: flex;}
.pay_add_success img {width:4.53vw; height:5.86vw;padding-left:2.6vw; padding-top:8.4vw;}
.pay_add_success .pay_add_right {font-size:3.733vw; margin-left:2.6vw;margin-top:6.2vw;}

/* 详情 */
.pay_title {margin-left:3vw; padding-top:2.6vw; font-size:4vw;}
.pay_product {display:flex; position: relative;}
.pay_product img {width:29.3vw; height:29.3vw;margin:2.6vw 2.6vw 0 2.6vw; border-radius: 2.6vw;}
.pay_product .pay_pr_title {font-size:3.4vw; margin-right:2.6vw; margin-top:4.6vw; }
.pay_product .pay_pr_title >>> p {color:#999;font-size:3.4vw; height: 5vw; margin:0; padding:0;}
.cont_color_title {margin-left:3vw; padding-top:2.6vw; font-size:4vw;}
.cont_color_list { display: flex; justify-content: space-around; margin:3vw; padding-bottom:5vw;}
.cont_color_list li {display: flex; width:auto; border:1px solid #f6f6f6; border-radius: 1.3vw;;}
.cont_color_list li img {width:6.667vw; height:6.667vw; margin:1.3vw;}
.cont_color_list li p {font-size:3.2vw; line-height: 6.667vw; margin-top:1.3vw;margin-right:1.3vw;}

/* 办理方式 */
.content_border {border-top:1px solid #e1e1e1; margin:2.6vw;}
.pay_content .content_text li {display: flex; justify-content: space-between;}
.pay_content .content_text li p {font-size:3.2vw; color:#999; height:6vw; line-height:6vw; margin-left:2.6vw;}
.pay_content .content_text li span {font-size:4vw; color:#D62F34; height:6vw; line-height:6vw; margin-right:2.6vw;}

/*支付方式*/
.pay_list {margin-top:4vw;}
.pay_list li {display:flex; justify-content: space-between;}
.pay_icon {display:flex; height:12vw;}
.pay_icon img {width:5.3vw; height:5.3vw; margin-left:2.6vw;}
.pay_icon p {padding-left:2.6vw;}
.pay_sel img {width:4vw; height:4vw; margin-right:2.6vw;}
.bottom_btn{
  display: flex;
  /*width: 374px;*/
  height: 16vw;
  text-align: center;
  line-height: 16vw;
  font-size: 4.5vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  background: #F86831;
}
.bottom_btn_left{
  width: 50vw;
  background: #C1C1C1;
}
.bottom_btn_right{
  flex: 1;
}
.list{
  width: 93.6vw;
  margin: 0 auto;
  padding-top: 8vw;
}
.list_item{
  background: url("~@/assets/pay_quan_bg.png");
  background-size: cover;
  width: 93.6vw;
  box-sizing: border-box;
  display: flex;
  height: 21vw;
  padding-right: 3.2vw;
  margin-bottom: 4vw;
}
.list_item_left{
  width: 29.3vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list_item_right{
  flex:1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*justify-content: center;!**!*/
}
.right_left{
  padding-left: 3.2vw;
}
.right_left_title{
  font-size:4.53vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}
.right_left_time{
  margin-top: 3.2vw;
  font-size: 3.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #A1A1A1;
}
.left_unit{
  color: #fff;
  font-size: 4.5vw;
}
.left_price{
  color: #fff;
  font-size: 6.4vw;
}
.scroll{
  max-height: 300px;
  overflow-x: hidden;
}
</style>